<template>
  <div>
    <el-form :inline="true" ref="form" :model="form" label-width="80px">
      <el-form-item label="岗位编码">
        <el-input v-model="form.postCode"></el-input>
      </el-form-item>
      <el-form-item label="岗位名称">
        <el-input v-model="form.postName"></el-input>
      </el-form-item>
      <el-form-item label="岗位状态">
        <el-select v-model="form.status" placeholder="用户状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="postList">查询</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button type="primary" @click="toAdd">添加</el-button>
      <el-button type="success" @click="selectUser">修改</el-button>
      <el-button type="danger" @click="deleteUser">删除</el-button>
      <el-button type="info">导入</el-button>
      <el-button type="warning" @click="exportUsers">导出</el-button>
    </el-row>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection" width="55">
      </el-table-column>
      <el-table-column
          label="岗位编号"
          prop="postId"
          width="120">
      </el-table-column>
      <el-table-column
          prop="postCode"
          label="岗位编码"
          width="120">
      </el-table-column>
      <el-table-column
          prop="postName"
          label="岗位名称"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="postSort"
          label="岗位排序"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="状态"
          show-overflow-tooltip>
        <template v-slot="ss">
         <span v-if="ss.row.status==0"><el-button type="primary" plain>正常</el-button></span>
         <span v-if="ss.row.status==1"><el-button type="info" plain>停用</el-button></span>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[1, 2, 3, 4,5,6]"
          :page-size=pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      pageNum:1,
      pageSize:3,
      total:0,
      form: {
        postCode: '',
        postName:'',
        status: ''
      },
      tableData: []
    }
  },
  methods: {
    postList(){
      const params= this.form;
      params.pageNum=this.pageNum;
      params.pageSize = this.pageSize;
      console.log(params)
      this.axios.get("http://localhost:6785/post/select",{params}).then(res=>{
        console.log(res.data.list.list);
        this.tableData=res.data.list.list;
        this.total = res.data.list.total;
        this.pageNum=res.data.list.pageNum;
        this.pageSize=res.data.list.pageSize;
      })
    },
    //每页多少条数据
    handleSizeChange(val) {
      this.pageSize=val;
      this.postList();
    },
    //查询第几页数据
    handleCurrentChange(val) {
      this.pageNum = val;
      this.postList();
    }
  },
  created() {
    this.postList();
  }
}
</script>
<style scoped>

</style>